<template>
    <div class="">
        <a-select v-bind="$attrs" v-if="formType == 1 || editType == 0" :value="renderSelect" ref="xlSelect" @search="selectSearch" showSearch allowClear @change="selectChange">
            <div slot="dropdownRender" slot-scope="menu">
                <v-nodes :vnodes="menu"/>
                <a-divider style="margin: 4px 0;"/>
                <div
                        style="padding: 4px 8px; cursor: pointer;"
                        @mousedown="e => e.preventDefault()"
                        @click="addItem"
                >
                    <a-icon type="plus"/>
                    添加此选项
                </div>
            </div>
            <a-select-option
                    :value="item[selectValue]"
                    :key="index"
                    v-for="(item,index) in selectData"
            >
                {{item[selectName]}}
            </a-select-option>
        </a-select>
        <a-input v-else  v-bind="$attrs" v-model="inputModel" @change="inputChange">
        </a-input>
    </div>
</template>
<script>
    import service from '../../assets/service/require'
    export default {
        name: "assignSelect",
        data() {
            return {
                selectData: [],
                searchText:'',
                selectModel:'',
                inputModel:''
            }
        },
        components: {
            VNodes: {
                functional: true,
                render: (h, ctx) => ctx.props.vnodes,
            },
        },
        watch:{
            value(){
                this.inputModel = this.value
                if(this.formType==1){
                    service({
                        url: this.url,
                        method: 'POST',
                        data: {
                            param: this.params
                        }
                    })
                        .then(result => {
                            this.selectData = result.result
                        })
                }
            },
        },
        created() {
            this.inputModel = this.value
            service({
                url: this.url,
                method: 'POST',
                data: {
                    param: this.params
                }
            })
                .then(result => {
                    this.selectData = result.result
                })
        },
        methods: {
            inputChange(){
                this.$emit('change',this.inputModel)
            },
            selectSearch(e){
                this.searchText = e
            },
            addItem(e) {
                console.log(this.$refs.xlSelect)
                this.selectData.push({
                    [this.selectValue]:'zdy'+this.searchText,
                    [this.selectName]:this.searchText
                });
            },
            selectChange(e) {
                let formData = JSON.parse(JSON.stringify(this.selectData.filter(item => item[this.selectValue] == e)[0] || []))
                try {
                    let zdyId = formData[this.selectValue].match('zdy')
                    if(zdyId.length){
                        delete formData[this.selectValue]
                        this.$emit('assignForm', formData)
                    }
                }
                catch (e) {
                }
                if(this.filters.length){
                    let filterForm = {}
                    console.log('filter')
                    this.filters.map(item=>{
                        filterForm[item] = formData[item]
                    })
                    console.log(filterForm)
                    return this.$emit('assignForm', filterForm)
                }
                this.$emit('assignForm', formData)
            }
        },
        props: {
            url: String,
            selectValue: undefined,
            selectName: String,
            value: undefined,
            filters: {
                type: Array,
                default: () => {
                    return []
                }
            },
            params: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            formType: {
                type: Number,
                default: 1
            },
            formData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            editType:{
                type: Number,
                default: 0
            },
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        computed: {
            renderSelect() {
                return this.value || ''
            }
        }
    }
</script>
<style scoped>
</style>
